<template>
  <div class="detail-page">
    <el-descriptions v-if="userInfo" class="margin-top"
                     title="用户信息"
                     :column="4"
                     :size="size"
                     border>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <user/>
            </el-icon>
            登录名
          </div>
        </template>
        {{ userInfo.userName }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <user/>
            </el-icon>
            用户名
          </div>
        </template>
        {{ userInfo.nickName }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <iphone/>
            </el-icon>
            用户手机
          </div>
        </template>
        {{ userInfo.phonenumber }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <iphone/>
            </el-icon>
            账号状态
          </div>
        </template>
        {{ userInfo.status === '0' ? '正常' : '停用' }}

      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <location/>
            </el-icon>
            户籍地址
          </div>
        </template>
        {{ userInfo.userOtherInfo.address }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <iphone/>
            </el-icon>
            当前部门
          </div>
        </template>
        {{ userInfo.dept.deptName }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <iphone/>
            </el-icon>
            用户邮箱
          </div>
        </template>
        {{ userInfo.email }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <iphone/>
            </el-icon>
            用户性别
          </div>
        </template>
        {{ userInfo.sex === '0' ? '男' : '女' }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <iphone/>
            </el-icon>
            用户性别
          </div>
        </template>
        {{ userInfo.sex === '0' ? '男' : '女' }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <iphone/>
            </el-icon>
            最后登录IP
          </div>
        </template>
        {{ userInfo.loginIp }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <iphone/>
            </el-icon>
            当前角色
          </div>
        </template>
        {{ rolesfile(this.userInfo.roles) }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <tickets/>
            </el-icon>
            毕业院校
          </div>
        </template>
        <el-tag size="small">{{ userInfo.userOtherInfo.graduationInstitution }}</el-tag>
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <tickets/>
            </el-icon>
            当前专业
          </div>
        </template>
        {{ userInfo.userOtherInfo.speciality }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <tickets/>
            </el-icon>
            学历
          </div>
        </template>
<!--        {{ this.userInfo.userOtherInfo.education }}-->
        本科
<!--        <dict-tag v-if="sys_education" :options="sys_education" :value="userInfo.userOtherInfo.education"/>-->
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <tickets/>
            </el-icon>
            身份证号
          </div>
        </template>
        {{ userInfo.userOtherInfo.idCard }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <tickets/>
            </el-icon>
            身份证地址
          </div>
        </template>
        {{ userInfo.userOtherInfo.idCardAddress }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <tickets/>
            </el-icon>
            入职时间
          </div>
        </template>
        {{ userInfo.userOtherInfo.entryTime?userInfo.userOtherInfo.entryTime.split('T')[0] :''}}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <tickets/>
            </el-icon>
            合同签订时间
          </div>
        </template>
        {{ userInfo.userOtherInfo.contractSigningTime ? userInfo.userOtherInfo.contractSigningTime.split('T')[0] : ''}}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <tickets/>
            </el-icon>
            银行卡号
          </div>
        </template>
        {{ userInfo.userOtherInfo.bankCard }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <tickets/>
            </el-icon>
            银行名称
          </div>
        </template>
        {{ userInfo.userOtherInfo.bankName }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <tickets/>
            </el-icon>
            开行地址
          </div>
        </template>

        {{ userInfo.userOtherInfo.bankAddress }}
      </el-descriptions-item>
      <el-descriptions-item>
      </el-descriptions-item>
      <el-descriptions-item>
      </el-descriptions-item>
      <el-descriptions-item>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <tickets/>
            </el-icon>
            身份证正面
          </div>
        </template>
        <ImagePreview :src="userInfo.userOtherInfo.idCardZ" :width="240" :height="150"></ImagePreview>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <tickets/>
            </el-icon>
            身份证反面
          </div>
        </template>
        <ImagePreview :src="userInfo.userOtherInfo.idCardF" :width="240" :height="150"></ImagePreview>
      </el-descriptions-item>
      <el-descriptions-item>
      </el-descriptions-item>
      <el-descriptions-item>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import {defineComponent} from 'vue';
import {getUser} from "@/api/system/user.js";
export default defineComponent({
  name: 'DetailPage',
  data() {
    return {
      userId: null,
      userInfo: null,
      getCurrentInstance: getCurrentInstance(),
      sys_education: null
    };
  },
  created() {
    this.userId = this.$route.query.userId;
    this.getUserinfo();
    const {proxy} = this.getCurrentInstance
    this.sys_education = proxy.useDict("sys_education");
  },
  methods: {
    rolesfile(data) {
      return data.map(res => {
        return res.roleName
      })
    },

    getUserinfo() {
      // 方法
      getUser(this.userId)
          .then(res => {
            console.log(res)
            this.userInfo = res.data
          })
          .catch(err => {
            console.log(err)
          })
    }

  }
});
</script>

<style scoped>
.detail-page {
  padding: 20px;
}

.detail-header {
  font-size: 24px;
  font-weight: bold;
}

.detail-content {
  padding: 20px;
}

.detail-row {
  margin-bottom: 20px;
}

.detail-label {
  font-weight: bold;
}

.detail-value {
  margin-left: 10px;
}

.detail-image {
  max-width: 100%;
  max-height: 400px;
}
</style>
